<template>
  <div class="app-container">
    <h1 ref="myh1">App 根组件</h1>
    <button @click="showThis">打印 this</button>
    <button @click="resetLeftCount">重置 Left 组件的 count 值为0</button>
    <hr />

    <input type="text" v-if="inputVisible" @blur="ToggleInput" ref="iptRef" />
    <button v-else @click="ToggleInput">展示输入框</button>
    <hr />

    <div class="box">
      <Left ref="comLeft"></Left>
    </div>
  </div>
</template>

<script>
  import Left from './components/Left.vue'

  export default {
    data() {
      return {
        inputVisible: false
      }
    },
    methods: {
      ToggleInput() {
        this.inputVisible = !this.inputVisible
        this.$nextTick(() => {
          if(this.inputVisible == true) {
            this.$refs.iptRef.focus()
          }
        })
      },
      showThis() {
        this.$refs.myh1.style.color = 'red'
      },
      resetLeftCount() {
        this.$refs.comLeft.resetCount()
      }
    },
    // 为什么用$nextTick而不用updated 因为任何数据的变化都会触发updated 可能受其他数据的影响
    // updated() {
    //   if(this.inputVisible == true) {
    //     this.$refs.iptRef.focus()
    //   }
    // },
    components: {
      Left
    }
  }
</script>

<style lang="less" scoped>
.app-container {
  padding: 1px 20px 20px;
  background-color: #efefef;
}
.box {
  display: flex;
}
</style>